<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: wsh
 * @Date: 2024-05-24 19:52:30
 * @LastEditors: wsh
 * @LastEditTime: 2024-05-29 09:34:28
-->
<template>
  <div class="hom1-container">
    <div class="left">
      <ul class="card-ul-1 gap-10">
        <li class="card-box flex1">
          <p class="text-title-label">养老机构等级分布</p>
          <div class="org-rate-chart" style="height: 230px">
            <AplidCharts ref="chartOrgEl2" :option="pieChartOrg3(1)" style="width: 100%; height: 100%"></AplidCharts>
            <div class="text-content">
              <p class="text-value">213</p>
              <p class="text-label">评定总数</p>
            </div>
          </div>
        </li>
      </ul>

      <ul class="card-ul-2 gap-10">
        <li class="card-box flex1">
          <p class="text-title-label">社区居家养老服务设施等级分布</p>
          <div class="org-rate-chart" style="height: 230px">
            <!-- <AplidCharts ref="chartOrgEl2" :option="pieChartOrg4()" style="width: 100%; height: 100%"></AplidCharts> -->
            <!-- <AplidCharts ref="chartOrgEl2" :option="pieChartOrg3(2)" style="width: 100%; height: 100%"></AplidCharts> -->
            <AplidCharts ref="chartOrgEl2" :option="pieChartOrg3(2)" style="width: 100%; height: 100%"></AplidCharts>
            <div class="text-content">
              <p class="text-value">1467</p>
              <p class="text-label">评定总数</p>
            </div>
          </div>
        </li>
      </ul>

      <ul class="card-ul-3 gap-10 flex">
        <li class="card-box flex1">
          <p class="text-title-label">各区养老机构和社区居家养老服务设施数量</p>
          <AplidCharts ref="chartEl3" :option="barChart12(org12_DATA, 1)" style="width: 100%; height: 100%"></AplidCharts>
        </li>
      </ul>
    </div>
    <div class="main">
      <MapMain :key="activeTab" :activeTab="activeTab"></MapMain>
    </div>
    <div class="right">
      <ul class="card-ul-1 gap-10 flex">
        <li class="card-box flex1">
          <p class="text-title-label">职业技能等级分布</p>
          <AplidCharts ref="chartPie3dEl" type="Pie3d" :option="Pie3d(levelLenend)"
            style="width: 100%; height: 80%; position: absolute; top: 0"></AplidCharts>
          <LegendBox :data="levelLenend" unit="%" style="bottom:10px"></LegendBox>
        </li>
        <li class="card-box flex1">
          <p class="text-title-label">职业技能等级认定在线考核</p>
          <!-- <rebroadcast style="width: 100%; height: 90%"></rebroadcast> -->
          <rebroadcast></rebroadcast>
        </li>
      </ul>

      <ul class="card-ul-2 gap-10">
        <li class="card-box flex1">
          <p class="text-title-label">职业技能等级认定现场照片</p>
          <div class="box-a">
            <!-- <depthWheel class="box-b" style="width: 100%; height: 100%"></depthWheel> -->
            <depthWheel></depthWheel>
          </div>
        </li>
      </ul>

      <ul class="card-ul-3 gap-10">
        <li class="card-box flex1">
          <p class="text-title-label">养老护理员职业技能等级认定</p>
          <scrolltable height="330px" :data="recordTableData.data" style="width: 100%" :column="recordTableData.column"
            :headerStyle="recordTableData.headerStyle" :columnStyle="recordTableData.columnStyle"></scrolltable>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getAssetsFile } from "@/utils/index";
import {
  barChart,
  barChartTwo,
  lineChartOne,
  barChart12,
  Pie3d,
  pieChartOrg3,
  pieChartOrg6,
} from "./config";
import MapMain from "@/views/aplid/MapMain/nursingAged.vue";
import depthWheel from "./components/depthWheel/index.vue";
import rebroadcast from "./components/rebroadcast/index.vue";
import scrolltable from "@/views/Home3/components/scrollTablePart/index.vue";
import staffList from "./components/staffList.json";
const activeTab = ref("1");

const levelLenend = [
  {
    name: "一级",
    value: 0.09,
    itemStyle: {
      color: "#69D5E9",
    },
  },
  {
    name: "二级",
    value: 0.33,
    itemStyle: {
      color: "#1877E6",
    },
  },
  {
    name: "三级",
    value: 2.08,
    itemStyle: {
      color: "#FDBD00",
    },
  },
  {
    name: "四级",
    value: 21.25,
    itemStyle: {
      color: "#9138EF",
    },
  },
  {
    name: "五级",
    value: 76.25,
    itemStyle: {
      color: "#77C484",
    },
  },
];

const getAgeByIdCard = (idCard) => {
  // 正则表达式，用于检查是否为合法的身份证号码
  const reg =
    /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;

  if (!reg.test(idCard)) {
    // 身份证号码不合法
    return "";
  }

  // 获取出生年月日
  const birthYear = parseInt(idCard.substring(6, 10), 10);
  const birthMonth = parseInt(idCard.substring(10, 12), 10);
  const birthDay = parseInt(idCard.substring(12, 14), 10);

  // 获取当前年月日
  const date = new Date();
  const currentYear = date.getFullYear();
  const currentMonth = date.getMonth() + 1; // 月份是从0开始的
  const currentDay = date.getDate();

  // 计算年龄
  let age = currentYear - birthYear;
  if (
    currentMonth < birthMonth ||
    (currentMonth === birthMonth && currentDay < birthDay)
  ) {
    age--;
  }

  return age;
};

const getGenderByIdCard = (idCard) => {
  // 检查是否为合法的18位身份证号码
  // if (idCard.length !== 18 || !/^\d+$/.test(idCard)) {
  if (idCard.length !== 18) {
    return '';
  }

  // 获取倒数第二位数字
  const genderCode = parseInt(idCard.charAt(16), 10);

  // 判断性别
  if (genderCode % 2 === 0) {
    return "女";
  } else {
    return "男";
  }
};

function maskID(id) {
  // 检查是否为合法的字符串
  if (typeof id !== "string" || id.length < 5) {
    return "Invalid ID";
  }

  // 使用正则表达式和replace方法隐藏中间部分
  return id.replace(/^(.{2})(?:\d+)(.{2})$/, "$1**********$2");
}

let newStaffList = staffList.map((item: any) => {
  if (item.idCardNo) {
    item.age = getAgeByIdCard(item.idCardNo);
    item.sex = getGenderByIdCard(item.idCardNo);
    item.encryptionNumber = maskID(item.idCardNo);
  }
  return item;
});

const org12_DATA = [
  { label: "玄武区", value: 15, value2: 73 },
  { label: "秦淮区", value: 51, value2: 115 },
  { label: "建邺区", value: 12, value2: 68 },
  { label: "鼓楼区", value: 45, value2: 185 },
  { label: "栖霞区", value: 30, value2: 181 },
  { label: "雨花台区", value: 20, value2: 79 },
  { label: "江宁区", value: 31, value2: 230 },
  { label: "浦口区", value: 11, value2: 66 },
  { label: "六合区", value: 16, value2: 107 },
  { label: "溧水区", value: 11, value2: 150 },
  { label: "高淳区", value: 13, value2: 130 },
  { label: "江北新区", value: 20, value2: 82 },
];

let recordTableData = ref({
  column: [
    {
      label: "姓名",
      prop: "name",
    },
    {
      label: "证件号",
      prop: "encryptionNumber",
    },
    {
      label: "年龄",
      prop: "age",
    },
    {
      label: "性别",
      prop: "sex",
    },
    {
      label: "取得等级",
      prop: "grade",
    },
    // {
    //   label: "考号",
    //   prop: "candiNumber"
    // },
  ],
  data: newStaffList.slice(0, 50),
  headerStyle: {
    textAlgin: "center",
    backgroundColor: "#0E2847aa",
    color: "#B0CCDD",
  },
  columnStyle: {
    height: "30px",
    color: "#7B99AD",
    textAlgin: "center",
  },
});

onMounted(() => {
  // console.log(staffList, 'staffList');
});
</script>

<style scoped lang="scss">
// @import "@/views/Home1/main.scss";

.org-rate-chart {
  position: relative;
  height: 100%;
  width: 100%;

  .text-content {
    width: 110px;
    height: 110px;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: #0000 url("@/assets/imgs/icon-hom1/icon-pie-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;

    .text-label {
      font-family: "PingFangSC-Regular ";
      font-weight: 400;
      font-size: 14px;
      color: #ffffffe6;
    }

    .text-value {
      font-family: "Franklin Gothic Medium";
      font-weight: 500;
      font-size: 28px;
      letter-spacing: 0.05px;
      color: #fff;
    }
  }
}

.progress {
  width: 80px;
  height: 80px;
  background: conic-gradient(var(--before-bg) var(--progress),
      var(--after-bg) var(--last));
  border-radius: 50%;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    inset: 10px;
    background-color: #0a131b;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
  }

  .progress-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.hom1-container {
  display: grid;
  grid-template-columns: 610.03px 1fr 610.03px;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: ". . .";
  margin: 0 10px;

  .icon-list {
    display: flex;
    flex-flow: column;
    gap: 10px;
    margin-top: 20px;

    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 58.28px;
      background: linear-gradient(90deg, #19222f 0%, rgba(30, 41, 56, 0) 100%);
    }
  }

  .icon-right-list {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    gap: 10px;
    height: 60%;
    position: absolute;
    top: 30%;

    &-item {
      width: 45%;
      text-align: left;
      justify-content: flex-start;
      display: flex;
      align-items: flex-start;
      min-height: 58.28px;
      gap: 4px;

      .value {
        font-size: 28px;
      }
    }
  }

  .text-title-label {
    font-family: "Microsoft YaHei Bold";
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.1px;
    text-align: left;
    color: #fff;
    position: relative;
    height: 33.74px;
    line-height: 33.74px;
    padding-left: 36px;
    z-index: 0;

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      background: url("@/assets/imgs/icon-big-label.webp") no-repeat;
      background-size: cover;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: -1;
    }
  }

  .card-box {
    padding: 10px;
    position: relative;
    z-index: 0;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(180deg,
          rgba(105, 197, 249, 0.66) 0%,
          rgba(53, 99, 125, 0.28) 100%);
      opacity: 0.1;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    .box-a {
      display: flex;
      justify-content: center;
      /* 水平居中 */
      align-items: center;
    }
  }

  .left {
    .card-ul {
      &-1 {
        height: 30%;
      }

      &-2 {
        height: 30%;
      }

      &-3 {
        height: 40%;
      }
    }
  }

  .main {
    .tab-box {
      width: 60%;
      margin: 0 auto;
    }
  }

  .right {
    .card-ul {
      &-1 {
        height: 30%;
      }

      &-2 {
        height: 25%;
      }

      &-3 {
        height: 40%;
      }
    }
  }
}
</style>
